<!-- 送货单 -->
<template>
  <div class="home">
    <van-nav-bar
      title="商品订单"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 搜索框 -->
   <form action="/">
    <van-search
    v-model="value"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
    action-text='搜索'
  />
</form>
    <!-- Tab标签页 -->
    <van-tabs v-model="active" title-active-color='#003399'>
       <van-tab title="全部">
           <Child :title='value'/>
       </van-tab>
       <van-tab title="待发货">
           <ChildWait/>
       </van-tab>
       <van-tab title="待收货">
           <ChildGoods/>
       </van-tab>
       <van-tab title="待评价">
           <ChildEvaluated/>
       </van-tab>
       
    </van-tabs>
  </div>
  <!-- 导航栏 -->
  
</template>

<script>
import Child from '@/components/register-index'//全部
import ChildWait from '@/components/register-wait'//待发货
import ChildGoods from '@/components/register-Goods'//待收货
import ChildEvaluated from '@/components/register-Evaluated'//待评价

export default {
    data(){
        return {
            value:'',
            active:0,
        }
    },
  methods: {
    onClickLeft() {
      this.$router.push('/home')
    },
    onSearch(val) {//键盘事件
        console.log(val);
    },
    onCancel() {
    //   Toast('取消');
    // console.log( Toast('取消'));
    },
  },
  components:{
      Child,
      ChildWait,
      ChildGoods,
      ChildEvaluated
  }
};
</script>
 
<style lang = "less" scoped>
.home {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #fff;
  z-index: 99;
  background-color: #f5f5f5;
  overflow: scroll;
  /* 头部 */
  .van-nav-bar{
      height: 0.64rem;
      background-color: RGB(0,51,153);
  }
      /deep/.van-icon{
          color: white;
          font-size: 0.3rem;
      }

   /deep/.van-nav-bar__title{
          color: white;
          font-size: 0.2rem;
      }
  /* 导航栏 */
  /deep/.van-search__content{
      border-radius: 0.15rem;
      height: 0.4rem;
  }
  /* 四个标签TAB切换 */
  /deep/.van-tab{
      border-right: 1px solid #cccc;
  }
  /deep/.van-tabs__wrap{
      margin-bottom: 0.1rem;
      border: none;
  }
  /deep/.van-tabs__line{
      background-color:#fff ;
  }
}
 
</style>